<template>
  <div class="thing-view">
    <div class="flex justify-between items-center">
      <div>
        <el-button type="danger" size="small" icon="Delete">删除</el-button>
      </div>
    </div>
    <Table :data="tableData" @selection-change="handleSelectionChange">
      <TableColumn label="操作" width="100">
        <template #default="{ row }">
          <el-button type="primary" size="small" icon="Edit">编辑</el-button>
          <el-button
            type="danger"
            size="small"
            icon="Delete"
            @click="handleDeleteRow(row)"
          >
            删除
          </el-button>
        </template>
      </TableColumn>
    </Table>
    <Pagination
      v-model:current-page="page.currentPage"
      v-model:page-size="page.pageSize"
      :total="page.total"
      @size-change="getInfo"
      @current-change="getInfo"
    />
  </div>
</template>

<script setup lang="ts">
import Pagination, { PageType } from '@/components/Pagination.vue'
import TableColumn from '@/components/table/TableColumn.vue'
import Table from '@/components/table/Table.vue'
import { onMounted, reactive, ref } from 'vue'
import { PageParam } from '@/type'
import { ElMessageBox } from 'element-plus'

const selectedData = ref([])
const tableData = ref([])
const page = reactive<PageType>({
  currentPage: 1,
  pageSize: 20,
  total: 0,
})

function handleSelectionChange(rows: any[]) {
  selectedData.value = rows
}

function handleDeleteRow(row?: any) {
  let text = ''
  if (row.name) {
    text = `确定要删除【${row.name}】吗？`
  } else if (selectedData.value.length !== 0) {
    text = `确定要删除 ${selectedData.value.length} 条数据吗？`
  }
  if (text) {
    ElMessageBox.confirm(text, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(() => {
      //TODO
    })
  }
}

function getInfo() {
  const postData: PageParam = {
    currentPage: page.currentPage,
    pageSize: page.pageSize,
    sort: [],
    query: null,
  }
  // TODO
}

onMounted(() => {
  getInfo()
})
</script>

<style scoped lang="scss"></style>
